﻿@{
    ViewBag.Title = "ScheduleSearchList";
    Layout = "~/Views/Shared/_UserPage.cshtml";
}


<script type="text/javascript">
    var isInit = true;
    $(function () {
        $('#ContractType').combobox({
            editable: false, panelHeight: "auto",
            valueField: "DictionaryName",
            textField: "DictionaryName",
            url: "/Dictionary/GetDictionaryByTypeTag?typeTag=ContractType",
            onLoadSuccess: function () {
                var data = $('#ContractType').combobox('getData');
                if (data.length > 0) {
                    $('#ContractType').combobox('select', data[0]["DictionaryName"]);

                    $("#ProjectID").combobox({
                        editable: false, panelHeight: "auto",
                        valueField: 'ID',
                        textField: 'ProjectName',
                        url: '/ProjectInfo/ProjectInfoListForFlow',
                        onLoadSuccess: function () {
                            var data = $("#ProjectID").combobox('getData');
                            if (data.length > 0) {
                                $("#ProjectID").combobox('select', data[0]["ID"]);
                            }
                        },
                        onSelect: function (record) {
                            var contractType = $("#ContractType").combobox('getValue');
                            initContract(record.ID, contractType);
                        }
                    });
                }
            },
            onSelect: function (record) {
                var projectID = $("#ProjectID").combobox('getValue');
                if (projectID != '') {
                    initContract(projectID, record.DictionaryName);
                }
            }
        });       
    });

    function initContract(projectID, contractType) {
        $("#ContractID").combobox({
            editable: false, panelHeight: "auto", multiple: true, separator: ',',
            valueField: 'ID',
            textField: 'ContractName',
            url: '/ContractInfo/ContractInfoListByProjectIDAndType?projectID=' + projectID + '&contractType=' + encodeURI(contractType),
            onLoadSuccess: function () {
                var data = $("#ContractID").combobox('getData');
                if (data.length > 0) {
                    if (isInit) {
                        isInit = false;
                        var contractIDArr = new Array();
                        for (var i = 0; i < data.length ; i++) {
                            contractIDArr[i] = data[i]["ID"];
                        }
                        $('#ContractID').combobox('setValues', contractIDArr);
                        Search();
                    }
                    else {
                        $("#ContractID").combobox('select', data[0]["ID"]);
                    }
                }
            }
        });
    }

    function Search() {
        var projectID = $("#ProjectID").combobox('getValue');
        var contractType = $("#ContractType").combobox('getValue');
        var contractIDStr = $("#ContractID").combobox('getValues').toString();
        var url = '/Expense/GetScheduleSearchList?projectID=' + projectID + '&contractType=' + encodeURI(contractType) + '&contractIDStr=' + contractIDStr;
        $.post(url, function (res) {
            var myChart = new JSChart('chartsContainer', 'line');

            var myData = new Array();
            for (var i = 0; i < res.lstPointView.length; i++) {
                var x = res.lstPointView[i].X;
                var y = res.lstPointView[i].Y;
                var subData = [x, y];
                myData[i] = subData;
            }

            var myDataOne = new Array();
            for (var i = 0; i < res.lstPointViewOne.length; i++) {
                var x = res.lstPointViewOne[i].X;
                var y = res.lstPointViewOne[i].Y;
                var subDataOne = [x, y];
                myDataOne[i] = subDataOne;
            }

            var myDataTwo = new Array();
            for (var i = 0; i < res.lstPointViewTwo.length; i++) {
                var x = res.lstPointViewTwo[i].X;
                var y = res.lstPointViewTwo[i].Y;
                var subDataTwo = [x, y];
                myDataTwo[i] = subDataTwo;
            }

            if (myData.length > 0) {
                myChart.setDataArray(myData, '计划完成');
            }
            //if (myDataOne.length > 0) {
            //    myChart.setDataArray(myDataOne, '实际完成');
            //    myChart.setLineColor('#00FF00', '实际完成');
            //}
            if (myDataTwo.length > 0) {
                myChart.setDataArray(myDataTwo, '实际支付');
                myChart.setLineColor('#C83636', '实际支付');
            }

            myChart.resize(1500, 400);
            myChart.setAxisPaddingTop(35);
            myChart.setAxisPaddingBottom(35);
            myChart.setTitle('                                      2014年                                                                            2015年                                                                            2016年')
            myChart.setTitleColor('#37379E');
            myChart.setTitleFontSize(15);
            myChart.setTitlePosition('left');

            myChart.setAxisValuesNumberX(37);
            myChart.setIntervalStartX(0);
            myChart.setIntervalEndX(36);
            myChart.setAxisValuesNumberY(11);
            myChart.setIntervalStartY(0);
            myChart.setIntervalEndY(100);

            myChart.setLegendShow(true);

            myChart.setAxisNameX("月数");
            myChart.setAxisNameY("%");

            if (res.lstPointView.length > 0 ||  res.lstPointViewTwo.length) {
                myChart.draw();
            }
        })
    }

</script>

<div class="easyui-layout" fit="true">
    <div data-options="region:'north'" style="height:70px;">
        <table style="margin-top: 5px">
            <tr>
                <td style="width: 95px; text-align: center">项目名称</td>
                <td>
                    <input id="ProjectID" name="ProjectID" class="easyui-combobox" style="width: 360px;" />
                </td>
                <td style="width: 95px; text-align: center">合同类型</td>
                <td>
                    <input id="ContractType" name="ContractType" class="easyui-combobox" style="width: 360px;" />
                </td>
            </tr>
            <tr>
                <td style="width: 95px; text-align: center">标段名称</td>
                <td colspan="3">
                    <input id="ContractID" name="ContractID" class="easyui-combobox" style="width: 815px;" />
                    <a href="#" id="btnSearch" class="easyui-linkbutton" data-options="plain:true" onclick="Search();">查看</a>
                </td>
            </tr>
        </table>
    </div>
    <div data-options="region:'center'">
        <div id="chartsContainer" fit="true"></div>
    </div>
</div>
